<template>
	<view>
		<view class="uni-header">
			<view class="uni-group">
				<view class="uni-title"></view>
				<view class="uni-sub-title"></view>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="query" placeholder="请输入搜索内容" />
				<button class="uni-button" type="default" size="mini" @click="search">搜索</button>
				<button class="uni-button" type="primary" size="mini" @click="add('add')">添加任务</button>
			</view>
		</view>
		<view class="uni-container">
			<unicloud-db ref="udb" :collection="collectionName" :options="options" :where="where" field=""
				page-data="replace" :orderby="orderby" :getcount="true" :page-size="options.pageSize"
				:page-current="options.pageCurrent" v-slot:default="{ data, pagination, loading, error }">
				<uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
					<uni-tr>
						<uni-th align="center">标题</uni-th>
						<uni-th align="center">任务类型</uni-th>
						<uni-th align="center">需完成任务数量</uni-th>
						<uni-th align="center">内容</uni-th>
						<uni-th align="center">奖励类型</uni-th>
						<uni-th align="center">奖励数量</uni-th>
						<uni-th align="center">是否有现金奖励机会</uni-th>
						<uni-th width="170" align="center">创建时间</uni-th>
						<uni-th width="204" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in data" :key="index">
						<uni-td align="center">{{ item.title }}</uni-td>
						<uni-td align="center">{{ gettasktype(item.login) }}</uni-td>
						<uni-td align="center">{{ item.num }}</uni-td>
						<uni-td align="center">{{ item.count }}</uni-td>

						<uni-td align="center">{{ item.rewardtype == 0 ? '现金' : '金币' }}</uni-td>
						<uni-td align="center">{{ item.coin }}</uni-td>
						<uni-td align="center">{{ item.tixian == 0 ? '无' : '有' }}</uni-td>
						<uni-td align="center">
							<uni-dateformat :date="item.createtime * 1000" :threshold="[0, 0]" />
						</uni-td>
						<uni-td align="center">
							<view class="uni-group">
								<button @click="add('change', item)" class="uni-button" size="mini"
									type="warn">修改</button>
								<button @click="confirmDelete(item)" class="uni-button" size="mini"
									type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
						:total="pagination.count" @change="onPageChanged" />
				</view>
			</unicloud-db>

			<uni-popup ref="addtaskPopup" type="center">
				<view class="modal" style="width:450px; padding: 20px;">
					<view class="uni-container">
						<uni-forms ref="form" validateTrigger="bind">
							<uni-forms-item label="标题" name="title" labelWidth="100">
								<input class="uni-input-border" type="text" placeholder="标题" v-model="taskdata.title" />
							</uni-forms-item>
							<uni-forms-item label="需完成任务数量" name="title" labelWidth="100">
								<input class="uni-input-border" type="number" placeholder="需完成任务数量"
									v-model="taskdata.num" />
							</uni-forms-item>
							<uni-forms-item label="内容(可不填)" name="title" labelWidth="100">
								<input class="uni-input-border" type="text" placeholder="内容" v-model="taskdata.count" />
							</uni-forms-item>

							<uni-forms-item label="请输入奖励数量" name="title" labelWidth="100">
								<input class="uni-input-border" type="number" placeholder="奖励数量"
									v-model="taskdata.coin" />
							</uni-forms-item>

							<view class="main uni-padding-wrap">
								<view class="uni-title">任务类型</view>
								<ld-select :list="tasktypelist" label-key="label" value-key="value" placeholder="请选择"
									clearable v-model="taskdata.login" @change="selectChange"></ld-select>
							</view>

							<view class="uni-padding-wrap">
								<view class="uni-title">类型</view>
								<radio-group @change="radioChange">
									<label class="radio">
										<radio value="0" :checked="taskdata['rewardtype'] == 0"
											style="transform:scale(0.8)" />
										现金
									</label>
									<label class="radio">
										<radio value="1" :checked="taskdata['rewardtype'] == 1"
											style="transform:scale(0.8)" />
										金币
									</label>
								</radio-group>
							</view>

							<view class="uni-padding-wrap">
								<view class="uni-title">现金奖励机会</view>
								<radio-group @change="radioChange1">
									<label class="radio">
										<radio value="0" :checked="taskdata['tixian'] == 0"
											style="transform:scale(0.8)" />
										没有
									</label>
									<label class="radio">
										<radio value="1" :checked="taskdata['tixian'] == 1"
											style="transform:scale(0.8)" />
										有
									</label>
								</radio-group>
							</view>

							<view class="uni-button-group pointer">
								<button class="uni-button uni-button-full" type="primary" :disabled="isLoading"
									@click="save">保存</button>
							</view>
						</uni-forms>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="dialogpopup" type="dialog">
				<uni-popup-dialog mode="base" title="是否确认删除" :duration="2000" @close="close" @confirm="confirm">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import ldSelect from '@/components/ld-select/ld-select.vue';
	const db = uniCloud.database();
	// 表查询配置
	const dbCollectionName = 'taskinfo';
	const dbOrderBy = 'createtime'; // 排序字段
	const dbSearchFields = ['_id', 'title', 'count']; // 支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 10;
	const pageCurrent = 1;

	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isLoading: false,
				query: '',
				where: 'tasktype==0',
				orderby: dbOrderBy,
				collectionName: dbCollectionName,
				options: {
					pageSize,
					pageCurrent
				},
				taskdata: {
					tasktype: 0, //0 猜歌任务   1 每日任务
					login: 0, // 0 累计猜对  1 每日登陆
					title: '', // 任务标题
					num: 0, // 需要猜对的歌曲数
					count: '', // 任务内容
					rewardtype: 0, // 奖励类型   0 现金  1金币
					coin: 0, // 奖励数量
					tixian: 0
				},
				type: 'change',
				delid: '',
				tasktypelist: [{
						value: 0,
						label: '累计猜对'
					},
					{
						value: 2,
						label: '提现'
					},
					{
						value: 3,
						label: '看视频'
					},
					{
						value: 4,
						label: '金币兑换现金'
					}
				]
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			getWhere() {
				const query = this.query.trim();
				if (!query) {
					return '';
				}
				const queryRe = new RegExp(query, 'i');
				return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
			},
			search() {
				const newWhere = this.getWhere();
				const isSameWhere = newWhere === this.where;
				this.where = newWhere;
				if (isSameWhere) {
					// 相同条件时，手动强制刷新
					this.loadData();
				}
			},
			loadData(clear = true) {
				this.$refs.udb.loadData({
					clear
				});
			},
			onPageChanged(e) {
				this.$refs.udb.loadData({
					current: e.current
				});
			},
			add(type, item) {
				this.type = type;
				if (type == 'change') {
					this.taskdata = item;
				}
				this.$refs.addtaskPopup.open();
			},
			radioChange(evt) {
				this.taskdata['rewardtype'] = Number(evt.target.value);
				console.log(this.taskdata);
			},
			radioChange1(evt) {
				this.taskdata['tixian'] = Number(evt.target.value);
				console.log(this.taskdata);
			},
			confirmDelete(item) {
				this.delid = item._id;
				this.$refs.dialogpopup.open();
			},
			save() {
				if (this.taskdata['title'] == '') {
					uni.showToast({
						title: '请输入标题',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (Number(this.taskdata['num']) <= 0) {
					uni.showToast({
						title: '猜对歌曲数必须大于0',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (Number(this.taskdata['coin']) <= 0) {
					uni.showToast({
						title: '奖励数量必须大于0',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				this.isLoading = true;
				this.taskdata['caozuo'] = this.type;
				console.log(this.taskdata);
				uni.showLoading({
					title: '保存中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/createtask",
						data: this.taskdata
					}
				}).then((res) => {
					console.log(res, "res--------------")
					this.isLoading = false
					uni.hideLoading();
					if (res.result.errcode != 0) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						});
						return;
					} else {
						uni.showToast({
							title:this.type == 'add'?'添加成功': '修改成功',
							icon: 'none',
							duration: 2000
						})
					}
					this.$refs.addtaskPopup.close();
					this.loadData();
					this.taskdata['title'] = '';
					this.taskdata['count'] = '';
					this.taskdata['num'] = 0;
					this.taskdata['coin'] = 0;

				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					this.isLoading = false
					uni.hideLoading();
				})
			},
			close() {
				this.$refs.dialogpopup.close();
			},
			confirm() {
				uni.showLoading({
					title: '处理中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/deltask",
						data: {id: this.delid}
					}
				}).then((res) => {
					console.log(res, "res--------------")
					this.$refs.dialogpopup.close();
					this.loadData();
					uni.hideLoading();
					uni.showToast({
						title: '删除成功',
						duration: 2000,
						icon: 'none'
					});
				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					uni.hideLoading();
				})
			},
			gettasktype(status) {
				if (status == 0) {
					return '累计猜歌';
				} else if (status == 1) {
					return '每日登陆';
				} else if (status == 2) {
					return '提现';
				} else if (status == 3) {
					return '看视频';
				} else if (status == 4) {
					return '金币兑换现金';
				}
			},
			selectChange(val) {
				this.taskdata.login = val;
				console.log(this.taskdata);
			}
		}
	};
</script>
<style>
	.modal {
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		background-color: #ffffff;
	}

	.modal-content {
		padding: 15px;
		height: 500px;
		box-sizing: border-box;
	}

	.password-popup {
		padding: 30px;
	}

	.radio {
		margin-right: 25px;
	}

	.uni-padding-wrap {
		overflow: hidden;
		padding-bottom: 22px;
	}

	.uni-title {
		font-size: 14px;
		width: 100px;
		justify-content: flex-start;
		display: flex;
		margin-right: 50px;
		float: left;
		height: 36px;
		line-height: 36px;
		color: #606266 !important;
	}

	uni-radio-group {
		display: flex;
		float: left;
	}
</style>
